<template>
  <!-- 项目的最外层 -->
  <div class="outer">
    <!-- 头部 -->
    <!-- 商品分类导航 -->
    <My-TypeNav />
    <!--列表-->
    <My-List />
    <!--今日推荐-->
    <MyRecommend />
    <!-- 商品排行 -->
    <My-Rank />
    <!-- 猜你喜欢 -->
    <My-Like />
    <!--楼层-->
    <!-- 组件标签也是可以使用v-for进行列表渲染的 -->
    <My-Floor v-for="floor in floorList" :key="floor.id" :list="floor" />
    <!-- <My-Floor /> -->
    <!--商标-->
    <My-Brand />
    <!-- 底部 -->
  </div>
</template>

<script>
import MyBrand from "./Brand";
import MyFloor from "./Floor";
import MyLike from "./Like";
import MyList from "./ListContainer";
import MyRank from "./Rank";
import MyRecommend from "./Recommend";
import { mapState } from "vuex";
// import MyTypeNav from "./TypeNav";//已注册为全局可用,所以此处无需导入注册直接使用即可
export default {
  name: "MyHome",
  components: {
    // MyTypeNav, //商品分类导航
    MyList, //列表
    MyRecommend, //今日推荐
    MyRank, //商品排行
    MyLike, //猜你喜欢
    MyFloor, //楼层
    MyBrand, //商标
  },
  mounted() {
    this.$store.dispatch("getFloorList");
    // 已知用户登陆成功后会跳转至home组件,那么就需要在此视图内展示该用户的一些个人信息对吧?
    // 所以需要在此组件内派发请求获取该用户信息,请求成功后,用户数据会保存在仓库,那么哪个组件需要展示该用户数据直接去仓库捞即可。
    this.$store.dispatch("getUserInfo");
  },
  computed: {
    ...mapState({
      // 映射出store下home仓库中的floor数据
      floorList: (state) => state.home.getFloorList,
    }),
  },
};
</script>

<style>
</style>